<template>

	<my-nav-bar bgType="OrangeFrostedGlass" :showBackButton="true" title="我的样片收藏"></my-nav-bar>
	
	<scroll-view class="contentBox" scroll-y 
		refresher-enabled="true" @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing">
		<view class="placeholder" :style="{ height: getNavBarHeight() + 'px' }"></view>
		<view class="content">
			<view class="FavorItem" v-for="(item, index) in MyFavorList" :key="index">
				<image class="ItemImage" :src="item.image_url" mode="aspectFill"></image>
				<view class="ItemText"> {{ item.work_name }} </view>
			</view>
		</view>
	</scroll-view>
	
</template>

<script setup>
	import { ref, nextTick, onMounted } from 'vue';
	import { SYSTEM_INFO, getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIcon } from '@/utils/system.js';
	import { BASE_URL, request } from "@/utils/request.js";
	import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll } from "@dcloudio/uni-app";
	import { toUrl } from "@/utils/page.js";
	
	const MyFavorList = ref([]);
	const app = getApp();
	const UserInfoFromServer = app.globalData.UserInfoFromServer; //ref var
	const isLoggedIn = app.globalData.isLoggedIn; // ref var
	
	const hintLogin = ()=>{
		console.log("un logged in");
		uni.showModal({
			title: "请先登录",
			content: "收藏功能需要先登录",
			showCancel: false,
			// cancelText: "暂时不",
			confirmColor: '#3CC51F',
			success: function (res) {
			    if (res.confirm) {
			      console.log('用户点击了确定');
				  toUrl('/pages/my/my');
			    } else if (res.cancel) {
			      console.log('用户点击了取消');
			    }
			},
		})
	}
	
	const getMyFavorList = async function(){
		// localhost:8080/work_favorite/user/oUgYX7Xl_wE-SlHNT7W0sR2ROgrM
		console.log("user info: "); console.log(UserInfoFromServer.value);
		request( {url:`work_favorite/user/${UserInfoFromServer.value.open_id}`} )
			.then( res => {
				// console.log("getMyFavorList(): res = "); console.log(res.data);
				// console.log("my favor list.value: "); console.log(MyFavorList.value);
				MyFavorList.value = res.data;
				// console.log("my favor list.value: "); console.log(MyFavorList.value);
				MyFavorList.value.forEach( (item, index)=>{
					console.log("item: "); console.log(item);
					request( { url: `work/${item.work_id}` } )
						.then( res2 => {
							// console.log("getMyFavorList(): res2 = "); console.log(res2);
							MyFavorList.value[index].work_name = res2.data.work_name;
							MyFavorList.value[index].image_url = BASE_URL + `work/image/${item.work_id}`;
							console.log("item after assign: "); console.log(MyFavorList.value[index]);
						})
				})
			})
	}
	
	const isRefreshing = ref(false);
	const onRefresh = ()=>{
		console.log("on refresh()");
		uni.showToast({
			title: '收藏刷新中...',
			duration: 2000
		});
		isRefreshing.value = true;
		getMyFavorList()
			.finally(()=>{
	
				setTimeout(()=>{
					isRefreshing.value = false;
					uni.hideToast();
				},555);
				
			})
	}
	
	onLoad(()=>{
		if ( isLoggedIn.value === false ){
			hintLogin();
		} else {
			getMyFavorList();
		}
	})
	
</script>

<style lang="scss" scoped>
	.contentBox{
		position: fixed; left: 0; top: 0;
		height: 100%; width: 100%;
		display: flex; flex-direction: column; justify-content: center; align-items: center;
		
		.content{
			border: 1px solid red;
			width: 100%;
			.FavorItem{
				// border: 1px solid blue;
				box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.4); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
				width: 700rpx; height: 500rpx; border-radius: 50rpx;
				left: 0; right: 0;
				margin: 10px auto 10px auto;
				padding: 50rpx;
				display: flex; flex-direction: row; align-items: center; justify-content: center;
				.ItemImage{
					height: 400rpx; width: 400rpx; border-radius: 10px;
				}
				.ItemText{
					font-weight: bold;
					margin-left: 10px;
				}
			}
		}
	}


</style>
